<template>
	<view id="content">
		<HeaderC txt="首页"></HeaderC>
		<view-tabbar :current="0" v-if="isTabar"></view-tabbar>
		<!-- <view class="index-fu" @click="go">
			<image src="../../static/index/22.png" mode="aspectFit" ></image>
		</view> -->
		<view class="fiex-img">			
			<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/%E8%B7%B3%E8%BD%AC.png" mode="aspectFit" @click="showDrawer"></image>
		</view>
		<view class="index_bg">
			<view class="index_bg_tit">
				企业级HTTP服务提
			</view>
			<view class="index_bg_tit">
				供商
			</view>
			<view class="index_bg_text index_bg_text1">
				为大数据产业发展提供有力的支持，行业领先
			</view>
			<view class="index_bg_text">
				您值得信赖的代理首选
			</view>
			<view class="details_right">
				<view class="details_img">
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/11.png" class="details_img01" />
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/8.png" class="details_img02" />
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/9.png" class="details_img03" />
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/10.png" class="details_img04" />
				</view>
			</view>
		</view>
		<view class="swiper_bg swiper_bg1">
			<view class="swiper_bg_tit">
				我们为您提供
			</view>
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
			    <swiper class="swiper-box" @change="change">
			        <swiper-item v-for="(item ,index) in info" :key="index">
			            <view class="swiper-item">
							<view class="tit">
								{{item.content}}
							</view>
							<view class="content">
								{{item.content2}}
							</view>		
							<view class="ip_you">
								<view class="item">
									<text class="icon"></text>
									<view class="inblock">{{item.ip}}</view>
									<view class="inblock inblock2">
										<image class="img" src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/5.png" mode="aspectFit"></image>
									</view>
								</view>
								<view >
									<text class="icon"></text>
									<view class="inblock">{{item.flex}}</view>
									<view class="inblock inblock2">
										<image class="img" :src="item.img" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<button class="btn" type="primary" @click="goPage2(item.to)">了解详情</button>
			            </view>
			        </swiper-item>
			    </swiper>
			</uni-swiper-dot>	
		</view>	
		<view class="index_bg index_bg2">
			<view class="index_bg_tit index_bg_tit2">
				遍布全国的
			</view>
			<view class="index_bg_tit index_bg_tit2">
				运营商正规授权节点
			</view>
			<view class="index_bg_text index_bg_text1 index_bg_text11">
				地区覆盖全国200+城市线路
			</view>
			<view class="index_bg_text index_bg_text11">
				协议支持HTTP,HTTPS,SOCKS5
			</view>
			<view class="index_bg_text index_bg_text11">
				线路类型电信联通,IP可用率在95%以上
			</view>
			<view class="index_bg_text index_bg_text11">
				可选时效5分钟~24小时
			</view>
			<view class="index_bg02_img">
				<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/12.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="swiper_bg swiper_bg02">
			<view class="swiper_bg_tit">
				满足您任何大数据服务需求
			</view>
			<swiper class="swiper-box2" :indicator-dots="true" :autoplay="false" indicator-color="#b9d1f7" indicator-active-color='#3474fc' :interval="2000" :duration="500">
				<swiper-item v-for="(item ,index) in info2" :key="index">
				    <view class="swiper-item2">
						<view class="icon1">
							<image :src="item.img1" v-if="item.img1" mode="aspectFit" ></image>
							<view class="tit">
								{{item.tit1}}						
							</view>								
						</view>
						<view class="icon1">
							<image :src="item.img2"  v-if="item.img2" mode="aspectFit"></image>
							<view class="tit">
								{{item.tit2}}						
							</view>								
						</view> 
				    </view>
				</swiper-item>
			</swiper>
		</view>
		<view class="index_num">
		</view>
		<uni-drawer ref="showRight" mode="right" :mask-click="false">
		    <scroll-view style="height: 100%;paddingTop: 60rpx ;zIndex: 100001;" scroll-y="true">
				<view class="drawer-txt drawer-txt1">
					<image class="drawer-img" src="../../static/index/16.png" mode="aspectFit" @click="closeDrawer"></image>
				</view>			
				<view class="drawer-txt" @click="goPage2('efficientAgent')">
					高效代理
				</view>
				<view class="drawer-txt" @click="goPage2('exclusiveAgent')">
					独享代理
				</view>
				<view class="drawer-txt" @click="goPage2('longtermAgent')">
					长效代理
				</view>
				<view class="drawer-txt" @click="goPage2('dynamicProxy')">
					动态代理
				</view>
				<view class="drawer-txt" @click="goPage2('virtualAgent')">
					虚拟代理
				</view>
				<view class="drawer-txt" @click="goPage2('globalAgent')">
					全局代理
				</view>
		    </scroll-view>
		</uni-drawer>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				isTabar:false,
				title: 'Hello',
				info2: [{
				        content: '内容 A',
						tit1:"爬虫采集",
						tit2:'提升网速',
						tit3:"突破限制",
						tit4:'模拟应用',
						img1:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/2.png',
						img2:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/4.png',
						img3:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/1.png',
						img4:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/3.png'
				        }, {
				        content: '内容 B',
						tit1:'提升网速',
						tit2:'模拟应用',
						img1:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/4.png',
						img2:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/3.png'
						// img1:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/4.png',
						// img2:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/18.png',
						// img3:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/3.png',
						// img4:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/19.png',
				        },{
						content: '内容 c',
						tit1:'环境测试',
						tit2:'营销补量',
						img1:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/18.png',
						img2:'https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/19.png',
						}
						],
				 info: [{
				        content: '高效代理',
						content2:"IP数量大、真实IP、全国随机、API接入、白名单验证",
						ip:'IP数量最多',
						flex:"分布范围最广 ",
						img:"https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/6.png",
						to:"efficientAgent"
				        }, {
				        content: '独享代理',
						content2:"独享IP、独享带宽、真实IP、自控时长、API接入、白名单验证",
						flex:'分布范围广',
						ip:"IP数量最少",
						img:"https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/6.png",
						to:"exclusiveAgent"
				        }, {
				        content: '长效代理',
						content2:'24小时/永久有效、真实IP、API接入、账号密码验证',
						ip:'IP数量较少',
						flex:"真实IP",
						img:"https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/17.png",
						to:"longtermAgent"
				        }, {
				        content: '动态代理',
						content2:"动态分发、代码接入、虚拟IP、账号密码验证",
						ip:'IP数量较少',
						flex:"分布范围较广",
						img:"https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/6.png",
						to:'dynamicProxy'
				        }, {
				        content: '虚拟代理',
						content2:'地区选择、时长选择、虚拟IP、API接入、白名单验证',
						ip:'IP数量较多',
						flex:"虚拟IP ",
						img:"https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/17.png",
						to:'virtualAgent'
				        }, {
				        content: '全局代理',
						content2:'真实IP、API接入、代理全部流量、账号密码验证',
						ip:'IP数量较少',
						flex:"真实IP",
						img:"https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/17.png",
						to:"globalAgent"
				        }],
				current: 0,
				current2: 0,
				mode: 'round',
				mode2: 'round',
				dotsStyles:{
					width:"16rpx",
					selectedBackgroundColor:'#007AFF',
					backgroundColor:"rgba(0, 0, 255, 0.1)",
					selectedBorder:'#007AFF',
					selectedBorder:'#FFFFFF',
					border:'none',
				}
			}
		},
		onShow() {
		  // #ifdef MP-WEIXIN
		  	uni.hideTabBar({
		  		animation: false
		  	})
		  	this.isTabar=true
		  // #endif
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
			    withShareTicket: true,  
			    menus: ['shareAppMessage', 'shareTimeline']  
			})
			// #endif
		},
		methods: {
			go(){
				let certUrl = "https://url.cn/5g8T07W?_type=wpa&qidian=true";
				uni.navigateTo({
					url: '/pages/tool/showhfive?url='+certUrl
				})
			},
			 change(e) {
			            this.current = e.detail.current;
			        },
			change2(e) {
			           this.current2 = e.detail.current;
			       },
			goPage(e){
				uni.navigateTo({
					url: `/pages/index/${e}`
				})
			},
			goPage2(e){
				uni.navigateTo({
					url: `/pagesB/index/${e}`
				})
			},
			showDrawer(){
				this.$refs.showRight.open();
			},
			closeDrawer() {
			    this.$refs.showRight.close();
			}
		},
	}
</script>

<style lang="less" >
	#content {
		padding-bottom: 40rpx;
		.index-fu{
			position: fixed;
			top: 80rpx;
			right: 30rpx;
			z-index: 99;
			width: 130rpx;
			height: 130rpx;
			image {
			  width: 130rpx;
			  height: 130rpx;
			}    
		}
		uni-swiper-dot{
			width: 90%;
		}
		.drawer-img{
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 40rpx;
			margin-top: 40rpx;
		}
		.drawer-txt{
			color: #1b1b1b;
			font-size: 28rpx;
			height: 96rpx;
			line-height: 96rpx;
			margin: 0 auto;
			margin-right: 40rpx;
			margin-left: 40rpx;
			text-align: left;
			border-bottom: 2rpx solid #f1f1f1;
		}
		.drawer-txt1{
			margin-top: 100rpx;
		}
		.fiex-img{
			width: 100%;
			background:#5757E4;
			padding-left: 20rpx;
			text-align: center;
			image{
				float: right;
				width: 44rpx;
				height: 36rpx;
				margin-top: 32rpx;
				margin-right: 40rpx;
			}
		}
		.swiper_bg{
			background-color: #f7f8fa;
			width: 100%;
			height: 400rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			.swiper_bg_tit{
				text-align: center;
				font-size: 48rpx;
				color: #161a3a;
				font-weight: bold;
				height: 172rpx;
				line-height: 172rpx;
			}
			uni-swiper-item{
				width: 100%;
			}
		
		}
		.index_num{
			width: 100%;
			height: 360rpx;
			overflow: hidden;
			margin: 0;
			padding: 0;
			background:  url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/20.png');
			background-size: 100% 360rpx;
			image{
				width: 100%;
				height: 360rpx;
			}
		}
		
		.swiper_bg1{
			.uni-swiper__warp{
				margin-bottom: 400rpx;
			}
			.uni-swiper-wrapper, .swiper-box, .uni-swiper__warp{
				height: 700rpx;
			}
			.swiper-box{
				// padding-left: 28rpx;
				// padding-right: 28rpx;
			}
			.swiper-item{
				margin: 20rpx 5%;
				padding: 20rpx 32rpx 20rpx;
				background: #fff;
				box-shadow: 0px 2px 8px 2px #e8ebf9;
				overflow: hidden;
				box-sizing: border-box;
				.tit{
					font-size: 36rpx;
					color: #222222;
					font-weight: bold;
					margin-top: 30rpx;
				}
				.content{
					font-size: 24rpx;
					color: #666666;
					margin-top:28rpx;
					height: 70rpx;
					line-height: 35rpx;
					align-items:left;
					justify-content:flex-start;
				}
				.btn{
					width: 196rpx;
					height: 56rpx;
					line-height: 56rpx;
					margin: 40rpx 0;
					font-size: 24rpx;
					background: #3474fc;
				}
				.ip_you{
					padding: 48rpx 0;
					border-top: 1px solid #efeded;
					border-bottom: 1px solid #efeded;
					margin-top: 18rpx;
					.item{
						margin-bottom: 48rpx;
					}
					.icon{
						display: inline-block;
						width: 18rpx;
						height: 18rpx;
						background-color: #3474fc;
						border-radius: 50%;
						margin-right: 48rpx;
						vertical-align: middle;
					}
					.img{
						float: right;
						width: 48rpx;
						height: 46rpx;
						margin-right: 40rpx;
					}
					.inblock{
						font-size: 26rpx;
						color: #666666;
						display: inline-block;
					}
					.inblock2{
						float: right;
					}
				}
			}
		}
		.swiper_bg02{
			width: 100%;
			height: 880rpx;
			.uni-swiper__warp{
				margin-bottom: 400rpx;
			}
			.uni-swiper-wrapper, .swiper-box2, .uni-swiper__warp{
				height: 660rpx;
			}
			.swiper-box2{
				// width: 92%;
				height: 684rpx !important;
				uni-swiper-item{
					width: 320rpx !important;
					margin-left: 5%;
				}
				swiper-item{
					width: 320rpx !important;
					margin-left: 5%;
				}
				.swiper-item{
					width: 300rpx !important;
					background-color: #FFFFFF;
				}
				.uni-swiper-dots{
					bottom: 0rpx;
				}
			}
			.swiper-item2{
				width: 280rpx !important;
				height: 500rpx;
				padding: 4rpx;
				// margin: 0 5%;
				.icon1{			
					width: 280rpx !important;
					height: 232rpx;
					text-align: center;
					padding-top: 48rpx;
					// float: left;
					box-shadow: 0px 2px 8px 2px #e8ebf9;
					margin-bottom: 40rpx;
					margin-right: 20rpx;
					image{
						width: 70rpx;
						height: 70rpx;
					}
					.tit{
						margin-top: 30rpx;
					}
				}
				.icon1:nth-child(even){
					// float: right;
				}
				.icon1:nth-child(odd){
				}
			}
		}
		.index_bg{
			width: 100%;
			height: 880rpx;
			background: #5757e4;
			padding-top: 180rpx;
			padding-bottom: 150rpx;
			.index_bg_tit{
				text-align: center;
				font-size: 70rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 2rpx;
			}
			.index_bg_tit2{
				font-size: 50rpx;
			}
			.index_bg_text{
				text-align: center;
				color: #fff;
				margin-top: 10rpx;
			}
			.index_bg_text1{
				margin-top: 50rpx;
			}
			.index_bg_text11{
				font-size: 24rpx;
				font-weight: inherit;
			}
			@keyframes toptop {
			    0% {
			      top: 5%;
			    }
			    50% {
			      top: 10%;
			    }
			    100% {
			      top: 5%;
			    }
			  }
			   @-webkit-keyframes toptop /*Safari and Chrome*/ {
			      0% {
			        top: 5%;
			      }
			      50% {
			        top: 13%;
			      }
			      100% {
			        top: 5%;
			      }
			    }
			    @keyframes toptop02 {
			      0% {
			        top: 24%;
			      }
			      50% {
			        top: 19%;
			      }
			      100% {
			        top: 24%;
			      }
			    }
			    @-webkit-keyframes toptop02 /*Safari and Chrome*/ {
			      0% {
			        top: 24%;
			      }
			      50% {
			        top: 19%;
			      }
			      100% {
			        top: 24%;
			      }
			    }
			    @keyframes toptop03 {
			      0% {
			        bottom: -40rpx;
			      }
			      50% {
			        bottom: -64rpx;
			      }
			      100% {
			        bottom: -40rpx;
			      }
			    }
			    @-webkit-keyframes toptop03 /*Safari and Chrome*/ {
			      0% {
			        bottom: -40rpx;
			      }
			      50% {
			        bottom: -64prx;
			      }
			      100% {
			        bottom: -40rpx;
			      }
			    }
			    @keyframes toptop04 {
			      0% {
			        top: 11%;
			      }
			      50% {
			        top: 8%;
			      }
			      100% {
			        top: 11%;
			      }
			    }
			    @-webkit-keyframes toptop04 /*Safari and Chrome*/ {
			      0% {
			        top: 11%;
			      }
			      50% {
			        top: 8%;
			      }
			      100% {
			        top: 11%;
			      }
			    }
			  .details_right {
			    // float: left;
			    .details_img {
			      margin-top: 48rpx;
			      margin-left: 25%;
			      width: 384rpx;
			      height: 374rpx;
			      background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/7.png') no-repeat center;
			      position: relative;
			      background-size: cover;
			      .details_img01 {
			        position: absolute;
			        top: 10%;
			        left: 31%;
			        width: 104rpx;
					height: 68rpx;
			        -webkit-animation: toptop 3.5s infinite linear;
			        animation: toptop 3.5s infinite linear;
			      }
			      .details_img02 {
			        position: absolute;
			        top: 19%;
			        left: 28%;
			        width: 148rpx;
					height: 108rpx;
			        -webkit-animation: toptop02 3.5s infinite linear;
			        animation: toptop02 3.5s infinite linear;
			      }
			      .details_img03 {
			        position: absolute;
			        bottom: -40rpx;
			        left: -96rpx;
			        width: 148rpx;
					height: 134rpx;
			        -webkit-animation: toptop03 3s infinite linear;
			        animation: toptop03 3s infinite linear;
			      }
			      .details_img04 {
			        position: absolute;
					width: 148rpx;
					height: 134rpx;
			        top: 8%;
			        right: -42%;
			        -webkit-animation: toptop04 3s infinite linear;
			        animation: toptop04 3s infinite linear;
			      }
			    }
			  } 
		}
		.index_bg2{
			height: 960rpx;
			margin-top: 500rpx;
			padding: 110rpx 0 30rpx;
			.index_bg02_img{
				margin-top: 100rpx;
				text-align: center;
			}
		}
	}

</style>
